<template>
	<view class="wanl-money">
		<wanl-navbar :isBack="true" :background="{background: '#fff',}" :showGongNeng="true">
			<text slot="content" style="color: #000; width: 100%;padding-left: 20rpx;">
				爆单产品
			</text>
		</wanl-navbar>
		<!-- <view class="edgeInsetTop">
			<view style="font-size: 34rpx" :class="chooseActive == '1'?'active':''" @click="choose(1)">拼团</view>
			<view style="font-size: 34rpx" :class="chooseActive == '2'?'active':''" @click="choose(2)">上新</view>
		</view> -->
		<wanl-product :dataList="likeData" />
		<!-- 	<view class="cu-list menu-avatar" v-if="chooseActive == '1'">
			<wanl-product :dataList="likeData" dataType="groups" :jinyuanbao="true" :showTag="false" />
		</view>
		<view class="cu-list menu-avatar" v-if="chooseActive == '2'">
			<wanl-product :dataList="likeData" :jinyuanbao="true" />
		</view> -->
		<!-- 空 -->
		<view v-if="likeData.length == 0 && loading == false">
			<wanl-empty src="ticket_default3x" text="暂无商品" />
		</view>
		<view class="edgeInsetBottom"></view>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				loading: true,
				reload: false, //判断是否上拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'more',
				contentText: {
					contentdown: ' ',
					contentrefresh: '加载中',
					contentnomore: ''
				},
				zhongjiangTotal: '',
				likeData: [],
				chooseActive: '1'
			};
		},
		computed: {

		},
		onShow() {
			this.current_page = 1;
			this.reload = true;
			this.dataList = [];
			this.loadlikeData();
		},
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.loadlikeData();
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadlikeData();
			}
		},
		methods: {
			// 滚动底部加载猜你喜欢
			loadlikeData() {
				let url = '/Wanlshop/Page/baoGoods';
				// if (this.chooseActive == '1') {
				// 	url = '/Wanlshop/groups/Product/goldRecommend'
				// } else {
				// 	url = '/Wanlshop/Page/goldGoods'
				// }
				console.log("===url", url)
				uni.request({
					url: url,
					data: {
						page: this.current_page,
						// type:this.chooseActive
					},
					success: res => {
						// if(this.chooseActive == '1'){
						this.loading = false;
						this.likeData = this.reload ? res.data.data : this.likeData.concat(res.data
							.data); //评论数据 追加
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = res.data.total == 0 ? 'noMore' : 'more';
						// }else{
						// 	this.loading= false;
						// 	this.likeData = res.data; //
						// 	this.status = 'noMore';
						// }
					}
				});
			},
			choose(e) {
				console.log("===e", e)
				this.chooseActive = e;
				this.current_page = 1;
				this.reload = true;
				this.likeData = [];
				this.loadlikeData();
			}
		}
	};
</script>

<style>
	.wanl-money .balance {
		margin: 10rpx 25rpx 25rpx 25rpx;
	}

	.wanl-money .balance .details {
		padding: 50rpx 0;
	}

	.wanl-money .balance .operate {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background: rgba(0, 0, 0, 0.1);
		height: 80rpx;
		color: #fff;
	}

	.wanl-money .cu-list {
		margin-top: 40px;
	}

	.wanl-money .cu-list.menu-avatar>.cu-item {
		height: 180rpx;
		align-items: flex-start;
		padding: 25rpx 0;
		margin: 26rpx 0 0;
	}

	.wanl-money .cu-list.menu-avatar>.cu-item .cu-avatar {
		width: 125rpx;
		height: 125rpx;
		left: 25rpx;
		margin-top: 6rpx;
	}

	.wanl-money .cu-list.menu-avatar>.cu-item .content {
		left: 180rpx;
		width: calc(100% - 75rpx - 25rpx -150rpx);
		line-height: 1.5em;
	}

	.wanl-money .cu-list.menu-avatar>.cu-item .action {
		width: 130rpx;
		height: 100%;
		text-align: right;
		margin-right: 25rpx;
	}

	.edgeInsetTop {
		position: fixed;
		top: 40px;
		z-index: 1000;
		width: 100vw;
		padding: 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;

		view {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			&.active {
				color: #FC6A24;

				&:after {
					content: "";
					position: absolute;
					bottom: -20rpx;
					left: 35%;
					width: 30%;
					height: 8rpx;
					background: #FC6A24;
				}
			}
		}

	}

	.font-red {
		color: #FC6A24;
	}

	.green {
		color: #28C445;
	}

	.red {
		color: #FC6A24;
	}
</style>